@tailwind base;
@tailwind components;
@tailwind utilities;

/* layout */
#header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(113.58deg, #000e2c 0%, #01216d 100%);

  .logo {
    margin: 0 24px;
    width: 64px;
    height: 64px;
    overflow: hidden;
    a {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 120px;
      transform: translate(-50%, -50%);
    }
  }

  .header-menu {
    flex: 1;
    background: transparent;

    .ant-menu-submenu-selected {
      background: transparent;
    }
  }

  .header-search {
    width: 200px;
    margin: 0 24px;
    .ant-input {
      color: #fff;
      background: transparent;
    }
    .ant-btn-icon {
      color: #fff;
      vertical-align: middle;
    }
  }

  .header-member {
    .ant-btn-text {
      span {
        color: #fff;
      }
    }
  }

  .header-setting {
    > div {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: all 0.2s ease 0s;
      cursor: pointer;
      padding: 0 !important;
      background: transparent;
      &:hover {
        background: #fff;
      }
      .btn-inner {
        transition: all 0.2s ease 0s;
        > div {
          position: relative;
          width: 16px;
          height: 16px;
          .item {
            position: absolute;
            font-size: 16px;
            line-height: 1;
            color: #fff;
            right: -5%;
            bottom: 0;
            z-index: 0;
            transform: scale(0.6);
            transform-origin: 150% 150%;
            &.selected {
              left: -5%;
              right: 0;
              top: 0;
              z-index: 1;
              background-color: #fff;
              color: #000;
              transform: scale(0.8);
              transform-origin: 0;
            }
          }
        }
      }
    }
  }
}

#container {
  margin: 24px 48px;

  .main-cardList {
    margin: 24px 0;
  }
}
